<template>
  <div class="singerBox">
    <div class="condition">
      <div class="area">
        <span class="areaTitle">地区:</span>
        <navBar
          :hotTagList="languageSort"
          :top="topArea"
          @updataHotTagTop="updataHotTagTop"
        ></navBar>
      </div>
      <div class="area">
        <span class="areaTitle">分类:</span>
        <navBar
          :hotTagList="typeSort"
          :top="topType"
          @updataHotTagTop="updataHotTagTop"
        ></navBar>
      </div>
      <div class="area">
        <span class="areaTitle">筛选:</span>
        <navBar
          :hotTagList="initialSort"
          :top="topCondition"
          @updataHotTagTop="updataHotTagTop"
        ></navBar>
      </div>
    </div>
    <div
      class="singerList"
      v-infinite-scroll="load"
      infinite-scroll-distance="50px"
    >
      <songItem
        v-for="(item, index) in singerList"
        :key="index"
        :itemData="item"
        @routerClick="routerClick"
      ></songItem>
      <el-backtop target=".singerList"></el-backtop>
    </div>
  </div>
</template>
<script>
import navBar from './musicListChildren/components/navBar.vue'
import songItem from './components/songItem.vue'
import { getSingerListServer } from '@/api/discover/singer'
export default {
  name: 'singerPage',
  data() {
    return {
      // 地区
      languageSort: [
        { area: -1, name: '全部' },
        { area: 7, name: '华语' },
        { area: 96, name: '欧美' },
        { area: 8, name: '日本' },
        { area: 16, name: '韩国' },
        { area: 0, name: '其它' }
      ],
      topArea: { name: '全部' },
      //歌手类型男女
      typeSort: [
        { type: -1, name: '全部' },
        { type: 1, name: '男歌手' },
        { type: 2, name: '女歌手' },
        { type: 3, name: '乐队' }
      ],
      topType: { name: '全部' },
      // 名字筛选
      initialSort: [
        { initial: -1, name: '热门' },
        { initial: 'a', name: 'A' },
        { initial: 'b', name: 'B' },
        { initial: 'c', name: 'C' },
        { initial: 'd', name: 'D' },
        { initial: 'e', name: 'E' },
        { initial: 'f', name: 'F' },
        { initial: 'g', name: 'G' },
        { initial: 'h', name: 'H' },
        { initial: 'i', name: 'I' },
        { initial: 'j', name: 'J' },
        { initial: 'k', name: 'K' },
        { initial: 'l', name: 'L' },
        { initial: 'm', name: 'M' },
        { initial: 'n', name: 'N' },
        { initial: 'o', name: 'O' },
        { initial: 'p', name: 'P' },
        { initial: 'q', name: 'Q' },
        { initial: 'r', name: 'R' },
        { initial: 's', name: 'S' },
        { initial: 't', name: 'T' },
        { initial: 'u', name: 'U' },
        { initial: 'v', name: 'V' },
        { initial: 'w', name: 'W' },
        { initial: 'x', name: 'X' },
        { initial: 'y', name: 'Y' },
        { initial: 'z', name: 'Z' },
        { initial: 0, name: '#' }
      ],
      topCondition: { name: '热门' },
      // 请求数据
      area: -1,
      type: -1,
      initiall: -1,
      // 当前页
      currentPage: 1,
      singerList: [],
      isMore: false
    }
  },
  components: {
    navBar,
    songItem
  },
  created() {
    this.getSingerList()
  },
  methods: {
    // 筛选条件回调
    updataHotTagTop(item, index) {
      if (item.area) {
        this.topArea = item
        this.area = this.languageSort[index].area
        this.singerList = []
        ;(this.currentPage = 1), this.getSingerList()
      } else if (item.type) {
        this.topType = item
        this.type = this.typeSort[index].type
        this.singerList = []
        ;(this.currentPage = 1), this.getSingerList()
      } else if (item.initial) {
        this.topCondition = item
        this.initiall = this.initialSort[index].initial
        this.singerList = []
        ;(this.currentPage = 1), this.getSingerList()
      }
    },
    // 获取歌手数据
    async getSingerList() {
      const res = await getSingerListServer({
        type: this.type,
        area: this.area,
        initial: this.initiall,
        offset: (this.currentPage - 1) * 30
      })
      // console.log(res)
      this.singerList.push(...res.data.artists) // 把后续的数据加上配合无线滚动
      // this.singerList = res.data.artists
      this.isMore = res.data.more
    },
    // 无线加载
    async load() {
      if (this.isMore) {
        // console.log('进入')
        this.currentPage += 1
        this.getSingerList()
      }
      // console.log('到底了')
      // console.log(this.singerList)
    },
    // 跳转歌手信息
    routerClick(userId) {
      // console.log(userId, '歌手id跳转歌手详情')
      this.$router.push({ path: '/index/singerDetail', query: { id: userId } })
    }
  }
}
</script>
<style lang="scss" scoped>
.singerBox {
  width: 1300px;
  margin: 0 auto;
  margin-top: 20px;
  padding-left: 20px;
}
.area {
  display: flex;
  align-content: center;
  // justify-content: center;
  margin-bottom: 15px;
  .areaTitle {
    line-height: 27px;
    margin-right: 10px;
    color: #666;
  }
}
.condition {
  margin-bottom: 30px;
}
.singerList {
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 376px);
  overflow-y: scroll;
  padding-left: 20px;
  padding-top: 20px;
  .songItem {
    width: 224px;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    &:nth-child(5n) {
      margin-right: 0;
    }
  }
}
</style>
